<template>
    <ElConfigProvider :locale="locale">
        <el-date-picker clearable class="date_picker" :style="{width:width+'px'}" :format="format" :value-format="format" v-model="innerValue" :value="innerValue" :type="type" :placeholder="ph" />
    </ElConfigProvider>
</template>

<script setup>
    import { ref,computed,reactive,watch,onMounted } from 'vue'
    // import zhCn from 'element-plus/lib/locale/lang/zh-cn'
    import zhCn from 'element-plus/es/locale/lang/zh-cn'
    const locale = ref(zhCn); //日期框必须要用这个包，所以很麻烦，写个组件封装起来

    const emit = defineEmits(['update:value']) //此处要完全对应，采用固定的update:prop属性
    const props = defineProps({
        value: { type: String, require: true },
        type: { type: String, require: true, default:"date"},
        format: { type: String, require: true, default:"YYYY-MM-DD"},
        ph: { type: String, default: "选择日期" },
        width:  { type: Number, default: 140 },
    })
    // let obj = reactive({
    //     types: [
    //         { type:"date", format:"YYYY-MM-DD" },
    //         { type:"datetime", format:"YYYY-MM-dd HH:mm:ss" },
    //     ]
    // })
    let innerValue = computed({
        get() { return props.value },
        set(val) {
            if(val){
                emit('update:value', val)
            }else{
                emit('update:value', null)
            }
        }
    })
    // onMounted(() => {
    //     console.log("ddddd")
    //     obj.config.type = props.type;
    // })
    //以下直接绑props的值，编译后会出错，因此只能用个假的计算属性
    // watch(
    //     () => props.type,
    //     (val) => {
    //         console.log("val",val)
    //         emit('update:type', val) //组件里的props是只读的，要想做成双向绑定，必须要加watch事件，并且抛出指定的update:prop属性
    //         //外面写法也有变化，不能:value=""，要改为v-model:value=""，就能得到更新后的值
    //     }
    // )
</script>

<style scoped lang="scss">
    .date_picker { display: flex; }
</style>